<template>
    <div>
<!--  修改密码页面      -->
        <el-card style="height: 450px">
            <h4 align="left">修改密码</h4>
            <!--布局容器Main开始-->
            <div align="center" >
                <!--            <el-descriptions title="更改信息" >-->
                <el-divider></el-divider>
                <!--分割线-->
                <div style="width: 500px">
                    <el-form ref="editForm" :model="editForm" :rules="rules" label-width="120px">

                        <el-form-item label="原密码" prop="password">
                            <el-input type="password" prefix-icon="el-icon-lock" v-model="editForm.password" show-password></el-input>
                        </el-form-item>

                        <el-form-item label="新密码" prop="newPassword">
                            <el-input type="password" prefix-icon="el-icon-lock" v-model="editForm.newPassword" show-password></el-input>
                        </el-form-item>

                        <el-form-item label="再次输入新密码" prop="newPasswordAgain">
                            <el-input type="password" prefix-icon="el-icon-lock" v-model="editForm.newPasswordAgain" show-password></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="goon"@click="onEditSubmit">修改密码</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!--            </el-descriptions>-->
            </div>
            <!--布局容器Main结束-->
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                unLogin:true,
                user:{},
                editForm:{
                    password:'000000',
                    newPassword:'123123',
                    newPasswordAgain:'123123'
                },
                rules: {
                    password: [
                        {required: true, message: '请输原密码', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    newPassword: [
                        {required: true, message: '请输新密码', trigger: 'blur'},
                        {min: 6, max: 15, message: '请输入长度 6 到 15 个字符长度的密码', trigger: 'blur'}
                    ],
                    newPasswordAgain: [
                        {required: true, message: '请再次输新密码', trigger: 'blur'},
                        {validator: this.checkNewPassword, trigger: 'blur'}
                    ],

                }
            };
        },
        methods: {
            loadCustomerInfo(){
                console.log("loadCustomerInfo....");
                let url='http://localhost:9080/customercenter/info';
                console.log('url='+url);
                this.axios.get(url).then((response)=>{
                    let responseBody=response.data;
                    if(responseBody.state==20000){
                        this.editForm=responseBody.data;
                    }
                });
            },
            onEditSubmit(){
                console.log("onEditSubmit....");
                // let editFormData=this.qs.stringify(this.editForm)
                // console.log("editFormData:"+editFormData);
                //提交更改请求,不用RespondBody接收
                let url="http://localhost:9080/customercenter/update/password";
                console.log("password:"+this.editForm.password);
                console.log("newPassword:"+this.editForm.newPassword);
                this.axios.post(url,{
                        password:this.editForm.password,
                        newPassword:this.editForm.newPassword
                }).then((response)=>{
                    let responseBody=response.data;
                    if (responseBody.state == 20000) {
                        this.$message({
                            message: '密码修改成功！',
                            type: 'success'
                        });
                        this.loadCustomerInfo();
                    } else if (responseBody.state == 40400) {
                        this.$alert(responseBody.message, '警告', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    } else {
                        this.$message.error(responseBody.message);
                    }
                });
            },
            checkNewPassword(rule,value,callback){
                if (value!=this.editForm.newPassword) {
                    callback(new Error('两处输入的密码不一致,请重新输入!'));
                }else {
                    callback();
                }

            }

        },
        created() {
            console.log("created开始请求列表数据");

        },
        mounted() {
            console.log("mounted开始请求数据");
            this.loadCustomerInfo();
        }
    }
</script>
